<template>
  <div class="team">
    <!--左边二级侧边栏-->
    <div class="content-left"></div>
    <!--右边内容-->
    <div class="content-right">
      <div class="content-top">
        <span>班组管理</span>
      </div>
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="客服架构" name="1" />
          </el-tabs>
          <div class="view-content">
            <!--客服架构 Service-->
            <div v-if="activeName == 1" class="service">
              <div class="content-content-left fl">
                <Tree
                  :data="Service.data5"
                  :render="ServiceRenderContent"
                ></Tree>
              </div>
              <div class="content-content-right">
                <div class="content-content-top">
                  <span>员工信息</span>
                </div>
                <div class="content-head">
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">客服工号：</span>
                    <span class="span-input fl">
                      <el-input
                        v-model="Service.tableConfig.params.employeeNo"
                        placeholder="请输入客服工号"
                      ></el-input>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">客服姓名：</span>
                    <span class="span-input fl">
                      <el-input
                        v-model="Service.tableConfig.params.employeeName"
                        placeholder="请输入客服姓名"
                      ></el-input>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">部门：</span>
                    <span class="span-input fl">
                      <el-select
                        :clearable="true"
                        v-model="Service.tableConfig.params.deptId"
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="item in deptIdOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            FnSearch('Service')
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <!--测试用的按钮-->
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button type="primary" @click="ServiceSearchAdd"
                        >添加</el-button
                      >
                    </span>
                  </div>
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="true"
                    :columns="Service.tableConfig.columns"
                    :url="Service.tableConfig.url"
                    :pparams="Service.tableConfig.pparams"
                    @tableBubbling="ServiceTableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import Table from '@/components/table.vue'
import mixins from '@/const/mixins'
import {group} from '@/const/api'

export default {
  name: 'Team',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      Service: {
        isLoad: false, // 是否加载过该容器的数据
        data5: [],
        tableConfig: {
          url: '/Group/selectCalss',
          columns: [
            {
              dataIndex: 'employeeNo',
              title: '工号',
            },
            {
              title: '姓名',
              dataIndex: 'employeeName',
            },
            {
              dataIndex: 'phone',
              title: '手机',
            },
            {
              dataIndex: 'deptName',
              title: '部门',
            },
            {
              dataIndex: 'role',
              title: '角色',
            },
            {
              align: 'center',
              dataIndex: ['modify', 'delete'],
              title: '操作',
            },
          ],
          params: {
            employeeNo: '',
            employeeName: '',
            deptId: '',
          },
          pparams: {},
        },
        tableLoading: false,
        tableData: [
          {
            n1: 1,
            n2: 2,
            n3: 3,
            n4: 4,
            n5: false,
          },
        ],
      },
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '工号',
            width: '',
            type: 'text',
            name: 'workerNo',
            value: '',
            default: '',
            placeholder: '请填写工号',
            disabled: false,
            required: true,
          },
          {
            title: '姓名',
            width: '',
            type: 'text',
            name: 'workerName',
            value: '',
            default: '',
            placeholder: '请填写姓名',
            disabled: false,
            required: true,
          },
          {
            title: '密码',
            width: '',
            type: 'password',
            name: 'password',
            value: '',
            default: '',
            placeholder: '请填写密码',
            disabled: false,
            required: true,
          },
          {
            title: '手机',
            width: '',
            type: 'text',
            name: 'phone',
            value: '',
            default: '',
            placeholder: '请填写手机',
            disabled: false,
            required: true,
          },
          {
            title: '部门',
            width: '',
            type: 'select',
            name: 'deptId',
            value: '',
            default: '',
            placeholder: '请选择部门',
            disabled: false,
            required: true,
            clearable: true,
          },
          {
            title: '角色选择',
            width: '',
            type: 'select',
            name: 'roleId',
            value: '',
            default: '',
            placeholder: '请选择角色',
            disabled: false,
            required: true,
            clearable: true,
          },
        ],
        width: '28%',
        btnLoading: false,
        departmentOptions: [],
        skillOptions: [],
        roleOptions: [],
      },
      container: false,
      containerArr: ['Service'],
      deptIdOptions: [],
      timeStart: new Date(),
    }
  },
  created() {
    console.log(this.$store.state, '123')
    window._this = this

    this.getDepartmentList(0) // 获取部门
    this.getRoles() // 获取角色列表
  },
  methods: {
    loadData() {
      // 根据activeName加载对应tab数据
      let activeName = this.activeName
      this.container = this[this.containerArr[activeName * 1 - 1]] // 拿 tab con 进行操作
      if (activeName == 1 && !this.container.isLoad) {
        // 客服架构
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
      this.container.isLoad = true
    },
    FnSearch(key) {
      let container = this[key]
      container.isLoad = false
      container.tableConfig.params.pageNum = 1
      container.tableConfig.pparams = JSON.parse(
        JSON.stringify(container.tableConfig.params),
      )
      this.loadData()
    },
    ServiceSearch() {
      this.Service.isLoad = false
      this.Service.tableConfig.params.pageNum = 1
      this.Service.tableConfig.pparams = JSON.parse(
        JSON.stringify(this.Service.tableConfig.params),
      )
      this.loadData()
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      let responent
      let timeStart = this.timeStart
      let timeEnd = new Date()

      if (timeEnd - timeStart >= 1500) {
        if (type == 'cancel') {
          mask.showMask = false
          delete mask.addStaff
          this.$utils.clearForm(mask.form)
        } else if (type == 'addStaff') {
          this.$utils
            .maskForm(content.form)
            .then(async res => {
              mask.btnLoading = true
              if (mask.id) {
                res.id = mask.id
                responent = await this.$axios.$get(group('change'), {
                  params: res,
                })
              } else {
                responent = await this.$axios.$get(group('insert'), {
                  params: res,
                })
              }
              mask.btnLoading = false
              mask.showMask = false
              if (responent.state == this.ResCode) {
                !mask.id
                  ? this.$Message.success('保存成功')
                  : this.$Message.success('修改成功')
                setTimeout(() => {
                  this.$refs['Table'].fetchList()
                }, 100)
                delete mask.addStaff
                this.$utils.clearForm(mask.form)
              } else {
                this.$Message.error(responent.msg)
              }
            })
            .catch(err => {
              this.$Message.error(err)
            })
        }
        this.timeStart = timeEnd
      }
    },
    ServiceTableBubbling(e) {
      console.log(e, 'ServiceTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'modify') {
        mask.showMask = true
        mask.addStaff = true
        mask.id = content.id // 有id表示新增
        mask.title = '修改员工信息'
        mask.form.forEach((n1, i1) => {
          n1.name == 'password' && (n1.hidden = true)
        })
        content.roleId = String(content.roleId)
        this.$utils.maskForm(content, mask.form).then(async res => {
          mask.form = res
        })
      } else if (type == 'delete') {
        const h = this.$createElement
        this.$msgbox({
          title: '删除提示',
          message: h('p', null, [
            h('span', null, '你确定删除该记录吗？'),
            h(
              'i',
              {style: 'color: teal; fontStyle: normal'},
              content.workerName,
            ),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '删除中...'
              this.$axios
                .$get(group('delete'), {params: {id: content.id}})
                .then(res => {
                  done()
                  instance.confirmButtonLoading = false
                  instance.confirmButtonText = '确定'
                  if (res.state == this.ResCode) {
                    this.$Message.success('删除成功')
                    setTimeout(() => {
                      this.$refs['Table'].fetchList()
                    }, 100)
                  } else {
                    this.$Message.error(res.msg)
                  }
                })
            } else {
              done()
            }
          },
        }).then(action => {
          done()
        })
      }
    },
    ServiceSearchAdd() {
      this.mask.showMask = true
      this.mask.addStaff = true
      this.mask.id = null
      this.mask.title = '添加员工'
    },
    ServiceRenderContent(h, {root, node, data}) {
      let isRoot = this.isRoot
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%',
          },
        },
        [
          h('em', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline',
              },
              style: {
                marginRight: '8px',
              },
              on: {
                // click: () => { this.Fn(1) }//图标
              },
            }),
            h(
              'span',
              {
                on: {
                  click: () => {
                    this.FnJump('recentUpdates', {levelId: node.node.levelId})
                  },
                },
              },
              data.title,
            ),
          ]),
          h(
            'span',
            {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px',
              },
            },
            [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-add',
                }),
                style: {
                  marginRight: '8px',
                  display: data.deep >= 3 || !isRoot ? 'none' : 'inline-block',
                },
                on: {
                  click: () => {
                    this.append(root, node, data)
                  },
                },
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-remove',
                }),
                style: {
                  marginRight: '8px',
                  display: !isRoot ? 'none' : 'inline-block',
                },
                on: {
                  click: () => {
                    this.remove(root, node, data)
                  },
                },
              }),
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'md-build',
                }),
                style: {
                  display: !isRoot ? 'none' : 'inline-block',
                },
                on: {
                  click: () => {
                    this.FnEdit(root, node, data)
                  },
                },
              }),
            ],
          ),
        ],
      )
    },
  },
}
</script>

<style lang="less">
.team {
  .content-content-left {
    width: 20%;
    padding-top: 14px;
  }

  .content-content-right {
    min-height: calc(100vh - 60px - 50.8px - 60px);
    padding-left: 14px;
    margin-left: 20%;
    border-left: 1px solid #e5e5e5;
  }

  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .ivu-tree > .ivu-tree-children > li:first-child {
    margin-top: 0 !important;
  }

  .ivu-tree * {
    font-size: 13px !important;
    font-style: normal !important;

    em {
      * {
        cursor: pointer !important;
      }
    }
  }
}
</style>
